<template>
    <view :style="{ '--color': color }">
        <status-bar :title="pageData.name" :goHome="fromShare"></status-bar>
        <shop :pageData="pageData" @showStore="showStore = true"></shop>
        <view class="Content" :style="{ height: boxHeight + 'px' }">
            <view class="tabBao">
                <view class="tablist" :class="{ Active: index == current }" v-for="(item, index) in list" :key="item.id" @click.stop="changeCurrents(item, index)">{{ item.orderTypeName }}</view>
            </view>
            <swiper @change="changeSwiper" :indicator-dots="false" :autoplay="false" :duration="150" class="Swiper" :current="current">
                <block v-for="(item, index) in list" :key="item.id">
                    <!-- 点餐 -->
                    <swiper-item class="wh" v-if="item.orderType == 2">
                        <emptys v-if="!item.classGoods" :title="item.tip_text"></emptys>
                        <view class="mealBox" v-else>
                            <view class="Column" v-if="item.classGoods.length > 1">
                                <view
                                    class="ColList"
                                    @click="switchColumn(itemd)"
                                    :class="{ Active: classify_id == itemd.classify_id }"
                                    v-for="(itemd, indexd) in item.classGoods"
                                    :key="itemd.food_category_id"
                                >
                                    {{ itemd.name }}
                                </view>
                            </view>

                            <scroll-view scroll-y="true" class="commodity" @scrolltolower="scrolltolower" :style="foodHeigth">
                                <view class="commodList" v-for="(item, index) in commodityData" :key="item.goods_id">
                                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="shopImg"></image>
                                    <view class="commodeBox">
                                        <view class="d-flex f-column">
                                            <text class="title ellipsis">{{ item.name }}</text>
                                            <text class="color_99 size24 m-top10">已售 {{ item.sales_number }}</text>
                                        </view>
                                        <view class="priceBox">
                                            <view class="d-flex a-center color_ff4">
                                                <text class="h7 m-top4 bold">￥</text>
                                                <text class="size32 bold">{{ Math.floor(item.price) }}</text>
                                                <text class="size34 m-top4 bold">{{ priceRemainder(item.price) }}</text>
                                                <!-- <text class="color_cc h6 line-through m-left14" v-if="item.full_price">￥{{ item.full_price }}</text> -->
                                            </view>

                                            <view class="specifox" v-if="item.getGoodsSpecs" @click.stop="Specs(item)">
                                                <text class="white size22">选规格</text>
                                                <view class="speciNum" v-if="item.carNum >= 1">{{ item.carNum }}</view>
                                            </view>
                                            <view class="buyBox" v-else>
                                                <block v-if="item.carNum >= 1">
                                                    <view class="iconfont icon-jianshao3 color size44" @click="increase(1, item)"></view>
                                                    <view class="Number">{{ item.carNum }}</view>
                                                </block>
                                                <view class="iconfont icon-jia color size46" @click="increase(2, item)"></view>
                                            </view>
                                        </view>
                                    </view>
                                </view>

                                <emptys v-if="!commodityData.length"></emptys>
                            </scroll-view>
                        </view>
                    </swiper-item>
                    <!-- 套餐 -->
                    <swiper-item class="wh" v-if="item.orderType == 3">
                        <emptys v-if="!item.classGoods" :title="item.tip_text"></emptys>
                        <view class="mealBox" v-else>
                            <view class="Column" v-if="item.classGoods.length > 1">
                                <view
                                    class="ColList"
                                    @click="switchColumn(itemd)"
                                    :class="{ Active: classify_id == itemd.classify_id }"
                                    v-for="(itemd, indexd) in item.classGoods"
                                    :key="itemd.food_category_id"
                                >
                                    {{ itemd.name }}
                                </view>
                            </view>

                            <scroll-view scroll-y="true" class="commodity" @scrolltolower="scrolltolower" :style="foodHeigth">
                                <view class="commodList" v-for="(item, index) in commodityData" :key="item.goods_id">
                                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="shopImg"></image>
                                    <view class="commodeBox">
                                        <view class="d-flex f-column">
                                            <text class="title ellipsis">{{ item.name }}</text>
                                            <text class="color_99 size24 m-top10">已售 {{ item.sales_number }}</text>
                                        </view>
                                        <view class="priceBox">
                                            <view class="d-flex a-center color_ff4">
                                                <text class="h7 m-top4 bold">￥</text>
                                                <text class="size32 bold">{{ Math.floor(item.price) }}</text>
                                                <text class="h6 m-top4 bold">{{ priceRemainder(item.price) }}</text>
                                            </view>

                                            <view class="specifox" v-if="item.getGoodsSpecs" @click.stop="Specs(item)">
                                                <text class="white size22">选规格</text>
                                                <view class="speciNum" v-if="item.carNum >= 1">{{ item.carNum }}</view>
                                            </view>
                                            <view class="buyBox" v-else>
                                                <block v-if="item.carNum >= 1">
                                                    <view class="iconfont icon-jianshao3 color size44" @click="increase(1, item)"></view>
                                                    <view class="Number">{{ item.carNum }}</view>
                                                </block>
                                                <view class="iconfont icon-jia color size46" @click="increase(2, item)"></view>
                                            </view>
                                        </view>
                                    </view>
                                </view>

                                <emptys v-if="!commodityData.length"></emptys>
                            </scroll-view>
                        </view>
                    </swiper-item>
                    <!-- 评价 -->
                    <swiper-item class="Evaluation" v-if="item.orderType == 'commentList'">
                        <view class="EvaluaBox">
                            <view class="evnions">
                                <text class="color_33 size30">用户评价({{ allcount }})</text>
                                <view class="enbox">
                                    <view class="enboxlist" @click="SwitchEvaluation(ditem, dindex)" :class="{ Active: evaluatIndex == dindex }" v-for="(ditem, dindex) in enboxlists" :key="dindex">
                                        {{ ditem.name }}
                                    </view>
                                </view>
                            </view>
                            <view class="ScoreBox">
                                <text class="color bold size40">{{ pageData.score }}</text>
                                <text class="color_99 size26">商家评分</text>
                            </view>
                        </view>

                        <scroll-view scroll-y="true" class="Evaluationscroll" @scroll="Scroll" :scroll-top="scrollTop" @scrolltolower="scrolltolower" :style="Highlypraised">
                            <view class="evelin" v-if="commonData.length">
                                <view class="inlinee" v-for="(item, index) in commonData" :key="item.order_info_id">
                                    <view class="User">
                                        <view class="userbo">
                                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="userHead"></image>
                                            <view class="d-flex f-column">
                                                <view class="d-flex a-center m-bot8">
                                                    <text class="color_33 size28">{{ item.v_name }}</text>
                                                </view>
                                                <view class="d-flex a-center">
                                                    <block v-for="(stItem, stInx) in 5" :key="stInx">
                                                        <view class="iconfont size26 m-right6" :class="stInx < item.star ? 'icon-yishoucang color_ff4' : 'icon-shoucang7 color_99'"></view>
                                                    </block>
                                                </view>
                                            </view>
                                        </view>
                                        <text class="size26 color_33">{{ item.created_at }}</text>
                                    </view>
                                    <view class="rows size26 color_33 m-top20">{{ item.comment_word }}</view>

                                    <view class="imgBix" v-if="item.comment_pic && item.comment_pic.length == 1">
                                        <image :src="$imgUrls(item.comment_pic[0])" mode="heightFix" class="oneImg"></image>
                                    </view>
                                    <view class="imgBixTwo" v-if="item.comment_pic && item.comment_pic.length == 2">
                                        <block v-for="(sub, sin) in item.comment_pic" :key="sin">
                                            <image :src="$imgUrls(sub)" mode="aspectFill" class="twoImg"></image>
                                        </block>
                                    </view>

                                    <view class="imgBixMote" v-if="item.comment_pic && item.comment_pic.length >= 3">
                                        <block v-for="(sub, sin) in item.comment_pic" :key="sin">
                                            <image :src="$imgUrls(sub)" mode="aspectFill" class="threImg"></image>
                                        </block>
                                    </view>
                                </view>
                            </view>

                            <emptys v-if="!commonData.length"></emptys>
                        </scroll-view>
                    </swiper-item>
                    <!-- 商家 -->
                    <swiper-item class="Merchant" v-if="item.orderType == 'storeInfo'">
                        <scroll-view scroll-x="true" class="storeImgs scroll-row" v-if="pageData.merMemo && pageData.merMemo.length">
                            <view class="Imgsli" v-for="(item, index) in pageData.merMemo" :key="index">
                                <image :src="$imgUrls(item)" mode="aspectFill"></image>
                            </view>
                        </scroll-view>
                        <view class="Merxs">
                            <view class="flex-1 d-flex a-center">
                                <view class="iconfont icon-shijian color_33 size28"></view>
                                <text class="color_33 size28 m-left20">运营时间：{{ pageData.runTime }}</text>
                            </view>
                            <view class="iconfont icon-dianhua color_33 size36" @click.stop="$common.Tel(pageData.phone)"></view>
                        </view>
                        <view class="Merxs">
                            <view class="flex-1 d-flex a-center">
                                <view class="iconfont icon-a-011 color_33 size36"></view>
                                <text class="color_33 size28 m-left10">{{ pageData.address }}</text>
                            </view>
                            <view class="d-flex a-center p-left30" v-if="pageData.distance" @click.stop="openLocation">
                                <view class="iconfont icon-daohang_o size24 color_16d p-right10"></view>
                                <text class="colo_33 size28">{{ pageData.distance }}</text>
                            </view>
                        </view>
                        <view class="u-parse">
                            <u-parse :content="pageData.description" :domain="imgUrl"></u-parse>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
        </view>

        <view class="cartBox fiexBot" v-if="cartNum && cartNum >= 1 && current <= 1">
            <view class="flex-1 d-flex a-center">
                <view class="carine" @click="showCart = true">
                    <view class="iconGouwuche">
                        <view class="iconfont icon-gouwuche black size50"></view>
                    </view>
                    <view class="cartNum">{{ cartNum }}</view>
                </view>
                <view class="d-flex f-column m-left20">
                    <view class="d-flex a-center white">
                        <text class="size28 m-top12">￥</text>
                        <text class="size50">{{ Math.floor(totalPrice) }}</text>
                        <text class="size28 m-top12">{{ priceRemainder(totalPrice) }}</text>
                    </view>
                    <text class="color h6 line40" v-if="price_info.estimateText">{{ price_info.estimateText }}</text>
                </view>
            </view>
            <view class="Settlement" @click="Wind">立即结算</view>
        </view>

        <u-popup :show="showCart" :round="15" @close="showCart = false">
            <view class="Shopping" v-if="list.length">
                <view class="shopTop">
                    <text class="white size30">{{ itemData.orderTypeName }}购物车</text>
                    <view class="d-flex f-column">
                        <text class="white size24">拒绝剩宴</text>
                        <text class="white size24">适量点餐</text>
                    </view>
                </view>
                <view class="cainShop">
                    <text class="black size28 bold500">已选餐品{{ cartNum }}</text>
                    <view class="d-flex a-center" @click="clearCart">
                        <view class="iconfont icon-shanchu2 color_33 size30"></view>
                        <text class="black size28 m-left10">清空购物车</text>
                    </view>
                </view>
                <view class="cartBoxscoll">
                    <view class="cartList" v-for="(item, index) in cartData" :key="index">
                        <image :src="$imgUrls(item.goodsImg)" mode="aspectFill" class="goodsImg"></image>
                        <view class="cartLiBox">
                            <text class="black size30 bold ellipsis">{{ item.goods_name }}</text>
                            <text class="color_99 size22">{{ item.operation_text }}</text>
                            <view class="row j-sb a-center p-re">
                                <view class="d-flex a-center color_ff4">
                                    <text class="size28 m-top6">￥</text>
                                    <text class="size36 bold500">{{ Math.floor(item.price) }}</text>
                                    <text class="size28 bold500 m-top6">{{ priceRemainder(item.price) }}</text>
                                </view>
                                <view class="buyBox">
                                    <block v-if="item.num >= 1">
                                        <view class="iconfont icon-jianshao3 color size44" @click="increase(1, item, 'cart')"></view>
                                        <view class="Number">{{ item.num }}</view>
                                    </block>
                                    <view class="iconfont icon-jia color size46" @click="increase(2, item, 'cart')"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="cartBox">
                    <view class="flex-1 d-flex a-center">
                        <view class="carine">
                            <view class="iconGouwuche">
                                <view class="iconfont icon-gouwuche black size50"></view>
                            </view>
                            <view class="cartNum">{{ cartNum }}</view>
                        </view>
                        <view class="d-flex f-column m-left20">
                            <view class="d-flex a-center white">
                                <text class="size28 m-top12">￥</text>
                                <text class="size50">{{ Math.floor(totalPrice) }}</text>
                                <text class="size28 m-top12">{{ priceRemainder(totalPrice) }}</text>
                            </view>
                            <text class="color h6 line40" v-if="price_info.estimateText">{{ price_info.estimateText }}</text>
                        </view>
                    </view>
                    <view class="Settlement">立即结算</view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="specifShow" @close="specifShow = false" closeable :round="15">
            <view class="speciWrapper">
                <view class="row">
                    <image :src="$imgUrls(currenData.img)" mode="aspectFill" class="speciImg"></image>
                    <text class="flex-1 black size30 bold500 p-right40 ellipsis_2">{{ currenData.name }}</text>
                </view>
                <view class="domeonm" v-for="(item, index) in getGoodsSpecs.specsList" :key="index">
                    <text class="black size30 bold50">{{ item.title }}</text>
                    <view class="row">
                        <view
                            class="lists"
                            @click.stop="Switchspecif(sItem, index, sIndex)"
                            :class="{ Active: specs_ids.includes(sItem.specs_id), noState: !sItem.state }"
                            v-for="(sItem, sIndex) in item.list"
                            :key="sIndex"
                        >
                            {{ sItem.title }}
                        </view>
                    </view>
                </view>

                <view class="shopCat">
                    <view class="catPrice p-left30">
                        <view class="d-flex a-center white">
                            <text class="size36">￥</text>
                            <text class="size40 bold500">{{ Math.floor(catPrice) }}</text>
                            <text class="size22 m-top10">{{ priceRemainder(catPrice) }}</text>
                        </view>
                        <text class="color h6" v-if="price_info.estimateText">{{ price_info.estimateText }}</text>
                    </view>
                    <view class="joinCate" @click="joinCart()">加入购物车</view>
                </view>
            </view>
        </u-popup>
        <showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2"></showModel>

        <u-popup :show="showStore" @close="showStore = false" mode="bottom" :round="10" closeable>
            <view class="Storecontent">
                <view class="title">选择门店</view>
                <view class="list" v-for="(item, index) in shopList" :key="index" @click="changeStore(item)">
                    <image :src="$imgUrls(item.logo)" mode="aspectFill" class="list_log"></image>
                    <view class="flex-1 d-flex f-column j-sb height">
                        <text class="ellipsis black size30 bold500">{{ item.name }}</text>
                        <text class="ellipsis size26 color_99">{{ item.address }}</text>
                        <text class="size26 color_99" v-if="item.distance">{{ item.distance }}Km</text>
                    </view>
                    <view class="JoinBox" :class="{ active: item.shop_id == shop_id }">
                        <view class="iconfont icon-xuanzhong white size28"></view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import shop from '@/components/food/shop.vue';

    export default {
        components: {
            shop
        },
        data() {
            return {
                fromShare: 0,
                showModal: false,
                imgUrl: this.imgUrl,
                currenData: '',
                getGoodsSpecs: '',
                specifShow: false, //选规格
                showCart: false,
                specs_bind_id: '',
                specs_ids: [],
                specs_bind_text: '',

                commodityData: [],
                enboxlists: [
                    {
                        name: '全部',
                        comment_level: ''
                    },
                    {
                        name: '优质',
                        comment_level: 0
                    },
                    {
                        name: '良好',
                        comment_level: 1
                    },
                    {
                        name: '一般',
                        comment_level: 2
                    },
                    {
                        name: '有图',
                        comment_level: 666
                    }
                ],
                Num: 0,
                current: 0,
                columnIndex: 0,
                evaluatIndex: 0,
                rate: 2,

                catPrice: '',
                shop_id: '', // 27987
                pageData: '',
                list: [],
                classify_id: '',
                goods_id: '',
                cartData: [],
                price_info: '',
                cartNum: 0,
                page: 1,
                pageNum: 10,
                commonData: [],
                comment_level: '', // 查看的评价列表类型   ''全部  0好评 1中评 2差评
                hasImg: '', // 是否有图 1有图
                getMore: true,
                allcount: 0,
                scrollTop: 0,
                showStore: false,
                shopList: [],
                OrderPageNum: 0,
                merMemo: [
                    'https://msraimgcdn.mogoie.com/6165/1752718427345.png',
                    'https://msraimgcdn.mogoie.com/6165/1752718427345.png',
                    'https://msraimgcdn.mogoie.com/6165/1752718427345.png',
                    'https://msraimgcdn.mogoie.com/6165/1752718427345.png'
                ],
                orderType: '2',
                itemData: ''
            };
        },
        onLoad(opt) {
            if (opt.shop_id) this.shop_id = opt.shop_id;
            if (opt.fromShare) this.fromShare = opt.fromShare;
        },
        onShow() {
            this.shopOrderPage();
        },

        methods: {
            shopOrderPage() {
                this.OrderPageNum++;
                this.$http
                    .get({
                        url: '/GnmApi/shopOrderPage',
                        data: {
                            shop_id: this.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        const listBox = result.list || [];
                        if (this.OrderPageNum == 1) {
                            let findIndex = listBox.findIndex((n) => n.selected == 1);
                            this.current = findIndex;
                            this.orderType = listBox[0].orderType;
                            this.itemData = listBox[0];
                        }
                        listBox.forEach((item, index) => {
                            item.id = index + 1;
                        });
                        this.list = listBox;

                        if (!this.classify_id && result.list[0].classGoods) this.classify_id = result.list[0].classGoods[0].classify_id;
                        this.pageData = result.shop;
                        if (result.shop) this.shop_id = result.shop.shop_id;
                        this.shopList = result.shopList || [];
                        this.lookData();
                        this.cartList();
                    });
            },

            lookData() {
                const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                if (Index < 0) return;

                const result = this.list[Index].classGoods;
                if (!result) return;
                const Item = result.find((n) => n.classify_id == this.classify_id);
                this.commodityData = Item.goods || [];
            },

            changeCurrents(item, index) {
                this.current = index;
                this.orderType = item.orderType;

                if (item.orderType == 'commentList') {
                    this.page = 1;
                    this.comment_level = '';
                    this.hasImg = '';
                    this.getMore = true;
                    this.getCommentList();
                }
                if (item.orderType == 'commentList' || item.orderType == 'storeInfo') return;
                if (this.list.classGoods) this.classify_id = this.list[index].classGoods[0].classify_id;
                this.lookData();
                this.cartList();
            },

            switchColumn(item) {
                this.classify_id = item.classify_id;
                this.lookData();
                this.cartList();
            },
            Specs(item) {
                if (!this.vid) return (this.showModal = true);
                if (this.goods_id != item.goods_id) {
                    this.specs_idsBox = [];
                    this.goods_id = item.goods_id;
                }
                item.getGoodsSpecs.specsList.forEach((n) => {
                    if (n.list && n.list.length) {
                        n.list.forEach((p) => {
                            p.select = false;
                        });
                    }
                });
                this.currenData = item;
                item.getGoodsSpecs.specsList.forEach((n) => {
                    if (n.list && n.list.length) {
                        n.list[0].select = true;
                    }
                });
                this.getGoodsSpecs = item.getGoodsSpecs;
                this.LinkSpec();
                this.specifShow = true;
            },

            LinkSpec() {
                let curenSpecs = [];
                let curenSpecsTxt = [];
                this.getGoodsSpecs.specsList.forEach((n) => {
                    if (n.list && n.list.length) {
                        n.list.forEach((p) => {
                            if (p.select) {
                                curenSpecs.push(p.specs_id);
                                curenSpecsTxt.push(p.title);
                            }
                        });
                    }
                });
                this.specs_ids = curenSpecs.sort();
                this.specs_bind_text = curenSpecsTxt.join(',');
                const ItemcatPrice = this.getGoodsSpecs.specsPrice.find((n) => n.specs_ids == curenSpecs.join(','));
                if (ItemcatPrice) {
                    this.catPrice = ItemcatPrice.price;
                    this.specs_bind_id = ItemcatPrice.id;
                }
            },

            Switchspecif(item, index, sIndex) {
                if (!item.state) return false;
                this.getGoodsSpecs.specsList[index].list.forEach((n) => {
                    n.select = false;
                });
                this.getGoodsSpecs.specsList[index].list[sIndex].select = true;
                this.LinkSpec();
            },

            // 加入购物车
            joinCart(goods_id) {
                if (!this.vid) return (this.showModal = true);
                if (goods_id) this.goods_id = goods_id;
                const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                const classGoods = this.list[Index].classGoods;
                const foodCategory = classGoods.find((n) => n.classify_id == this.classify_id);
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/joinCart',
                        data: {
                            num: 1,
                            goods_id: this.goods_id,
                            specs_bind_id: this.specs_bind_id,
                            specs_bind_text: this.specs_bind_text,
                            shop_id: this.shop_id,
                            food_category_id: foodCategory.food_category_id,
                            mealPickupTime: foodCategory.mealPickupTime
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        this.specifShow = false;
                        this.commodityData.forEach((n) => {
                            if (n.goods_id == this.goods_id) n.carNum++;
                        });
                        this.shopOrderPage();
                        // this.cartList();
                    });
            },

            // 增减数量
            increase(Type, Item, cart) {
                if (!this.vid) return (this.showModal = true);
                // type 1减 2 加
                let num;
                let food_category_id;
                let car_id;
                if (!cart) {
                    if (Item.carNum == 0) return this.joinCart(Item.goods_id);
                    const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                    const classGoods = this.list[Index].classGoods;
                    const foodCategory = classGoods.find((n) => n.classify_id == this.classify_id);

                    // const car_idData = this.cartData.find((n) => n.goods_id == Item.goods_id && n.food_category_id == foodCategory.food_category_id);
                    const car_idData = this.cartData.find((n) => n.goods_id == Item.goods_id && n.food_category_id == Item.food_category_id);
                    if (Item.carNum == 1 && Type == 1) return this.delCart(car_idData.car_id, foodCategory.food_category_id, Item.goods_id);

                    if (Type == 1) num = Number(car_idData.num) - 1;
                    if (Type == 2) num = Number(car_idData.num) + 1;

                    car_id = car_idData.car_id;
                } else {
                    if (Item.num == 1 && Type == 1) return this.delCart(Item.car_id, Item.food_category_id, Item.goods_id);
                    if (Type == 1) num = Number(Item.num) - 1;
                    if (Type == 2) num = Number(Item.num) + 1;
                    car_id = Item.car_id;
                }
                food_category_id = Item.food_category_id;

                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/incCart',
                        data: {
                            car_id,
                            num,
                            food_category_id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        this.shopOrderPage();
                        // this.editData(Type, Item.goods_id);
                    });
            },
            delCart(car_id, food_category_id, goods_id) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/delCart',
                        data: {
                            car_id,
                            food_category_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        this.shopOrderPage();
                    });
            },
            async clearCart() {
                this.showCart = false;
                const result = await this.$Modals('提示', '是否确定清空购物车?');
                if (!result) return;
                let car_id = [];
                this.cartData.forEach((item) => {
                    car_id.push(item.car_id);
                });
                this.delCart(car_id.join(','), this.cartData[0].food_category_id);
            },
            editData(Type, goods_id) {
                // type 1减 2 加
                const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                const classGoods = this.list[Index].classGoods;
                const goodsBox = classGoods.find((n) => n.classify_id == this.classify_id).goods;
                const itemData = goodsBox.find((n) => n.goods_id == goods_id);
                Type == 2 ? itemData.carNum++ : itemData.carNum--;
                this.cartList();
            },

            cartList() {
                let food_category_ids = [];
                const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                if (Index < 0) return;
                const result = this.list[Index].classGoods;
                if (!result) return;
                const classGoodsClass = result.find((n) => n.classify_id == this.classify_id);
                result.forEach((item) => {
                    item.goods.forEach((n) => {
                        food_category_ids.push(n.food_category_id);
                    });
                });

                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/cartList',
                        data: {
                            shop_id: this.shop_id,
                            food_category_id: classGoodsClass.food_category_id,
                            is_food: 1,
                            food_category_ids: food_category_ids.join(',')
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        if (!result.length) this.showCart = false;
                        this.cartNum = res.cartNum;
                        this.cartData = result;
                        if (res.price_info) this.price_info = res.price_info;
                    });
            },
            scrolltolower() {
                if (!this.getMore) return;
                if (this.orderType == 'commentList') {
                    this.page++;
                    this.getCommentList();
                }
            },
            changeSwiper(e) {
                this.current = e.detail.current;
                this.changeCurrents(this.list[this.current], this.current);
            },
            priceRemainder(Price) {
                let integerPart = Math.floor(Price); // 整数部分: 25
                let decimalPartNum = Price - integerPart; // 小数部分: 0.48
                let decimalPartStr = decimalPartNum.toFixed(2); // 转为字符串: "0.48"
                let decimalDotFormat = decimalPartStr.slice(1);
                return decimalDotFormat;
            },
            openLocation() {
                let obj = {
                    s_latitude: this.pageData.pointx,
                    s_longitude: this.pageData.pointy,
                    name: this.pageData.name,
                    nameAdress: this.pageData.address
                };
                this.$pop.openLocation(obj);
            },

            getCommentList() {
                this.$http
                    .get({
                        url: '/singleSaleApi/get_comment',
                        data: {
                            shop_id: this.shop_id,
                            page: this.page,
                            pageNum: this.pageNum,
                            comment_level: this.comment_level,
                            hasImg: this.hasImg
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.allcount = res.count ? res.count.allcount : 0;
                        this.page == 1 ? (this.commonData = result) : (this.commonData = [...this.commonData, ...result]);
                        if (result.length < this.pageNum) this.getMore = false;
                    });
            },
            SwitchEvaluation(item, index) {
                this.evaluatIndex = index;
                this.comment_level = item.comment_level;
                this.scrollTop = 0;
                if (item.comment_level == 666) {
                    this.hasImg = 1;
                } else {
                    this.hasImg = 0;
                }
                this.page = 1;
                this.getMore = true;
                this.getCommentList();
            },
            Scroll(e) {
                const scrollTop = e.detail.scrollTop;
                this.scrollTop = scrollTop;
            },
            closeModel() {
                this.showModal = false;
                this.shopOrderPage();
            },
            Wind() {
                let car_ids = [];
                let food_category_ids = [];
                const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                if (Index < 0) return;
                const classGoods = this.list[Index].classGoods;
                const foodCategory = classGoods.find((n) => n.classify_id == this.classify_id);
                classGoods.forEach((item) => {
                    item.goods.forEach((n) => {
                        food_category_ids.push(n.food_category_id);
                    });
                });

                this.toUrl(`/orderPage/order/newOrder?food_category_id=${foodCategory.food_category_id}&shop_id=${this.shop_id}&food_category_ids=${food_category_ids.join(',')}`);
            },
            changeStore(item) {
                this.shop_id = item.shop_id;
                this.current = 0;
                this.classify_id = '';
                this.shopOrderPage();
                this.showStore = false;
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'vid', 'System']),
            boxHeight() {
                return this.System.windowHeight - this.totalHeight;
            },
            Highlypraised() {
                const height = this.System.windowHeight - this.totalHeight - 50 - 70;
                return {
                    height: height + 'px'
                };
            },
            foodHeigth() {
                const height = this.System.windowHeight - this.totalHeight - 50;
                return {
                    height: height + 'px'
                };
            },
            totalPrice() {
                let totals = 0;
                for (let i in this.cartData) {
                    totals += parseFloat(this.cartData[i].price) * parseInt(this.cartData[i].num);
                }
                return totals.toFixed(2);
            },
            dataBox() {
                const Index = this.list.findIndex((n) => n.orderType == this.orderType);
                if (Index < 0) return [];
                if (this.list[Index].classGoods) {
                    return this.list[Index].classGoods;
                } else {
                    return [];
                }
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .cartBox {
        width: 690rpx;
        height: 110rpx;
        background-color: #333;
        border-radius: 55rpx;
        display: flex;
        align-items: center;
        overflow: hidden;
        .carine {
            margin-left: 30rpx;
            position: relative;
            .iconGouwuche {
                width: 80rpx;
                height: 80rpx;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .cartNum {
                background-color: #ff4b4e;
                min-width: 44rpx;
                min-height: 44rpx;
                padding: 4rpx;
                position: absolute;
                top: -12rpx;
                right: -10rpx;
                border-radius: 50%;
                color: #fff;
                font-size: 22rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .Settlement {
            height: 100%;
            padding: 0 30rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            color: #fff;
            font-size: 32rpx;
            background-color: var(--color);
            font-weight: 500;
        }
    }
    .fiexBot {
        position: fixed;
        bottom: 30rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
    }
    .Shopping {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
        padding-bottom: 24rpx;
        .shopTop {
            width: 100%;
            height: 80rpx;
            background-color: var(--color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24rpx;
        }
        .cainShop {
            width: 100%;
            padding: 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cartBoxscoll {
            width: 100%;
            max-height: 800rpx;
            padding: 0 30rpx;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            margin-bottom: 24rpx;
            .cartList {
                width: 100%;
                margin-top: 50rpx;
                display: flex;
                .goodsImg {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                }
                .cartLiBox {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    position: relative;
                    .buyBox {
                        display: flex;
                        align-items: center;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        .icon-jianshao3 {
                            background-color: #fff;
                            border-radius: 50%;
                        }
                        .Number {
                            width: 70rpx;
                            color: #000;
                            font-size: 30rpx;
                            display: flex;
                            font-weight: 500;
                            justify-content: center;
                            background-color: #fff;
                        }
                    }
                }
            }
        }
    }
    .Content {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .tabBao {
            width: 100%;
            height: 100rpx;
            background-color: #fff;
            display: flex;
            .tablist {
                width: 160rpx;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: #333;
                font-size: 32rpx;
            }
            .Active {
                color: #000;
                font-weight: 500;
                position: relative;
            }
            .Active::after {
                content: '';
                width: 36rpx;
                height: 6rpx;
                background-color: var(--color);
                position: absolute;
                bottom: 10rpx;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 6rpx;
                overflow: hidden;
            }
        }

        .Swiper {
            width: 100%;
            flex: 1;
            box-sizing: border-box;
        }
        .mealBox {
            width: 100%;
            height: 100%;
            display: flex;
            .Column {
                width: 180rpx;
                height: 100%;
                overflow-y: scroll;
                .ColList {
                    width: 100%;
                    padding: 0 10rpx;
                    height: 90rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 30rpx;
                    color: #999;
                }
                .Active {
                    font-size: 30rpx;
                    background-color: #fff;
                    color: var(--color);
                    font-weight: bold;
                }
            }
            .commodity {
                flex: 1;
                background-color: #fff;
                padding: 0 20rpx 10rpx 20rpx;
                box-sizing: border-box;
                .commodList {
                    width: 100%;
                    display: flex;
                    margin-bottom: 34rpx;
                    .shopImg {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 10rpx;
                        margin-right: 14rpx;
                    }
                    .commodeBox {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .title {
                            color: #000;
                            font-size: 32rpx;
                            font-weight: bold;
                        }
                        .priceBox {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            position: relative;
                            .buyBox {
                                display: flex;
                                align-items: center;
                                position: absolute;
                                right: 0;
                                bottom: 0;
                                .icon-jianshao3 {
                                    background-color: #fff;
                                    border-radius: 50%;
                                }
                                .Number {
                                    width: 70rpx;
                                    color: #000;
                                    font-size: 30rpx;
                                    display: flex;
                                    font-weight: 500;
                                    justify-content: center;
                                    background-color: #fff;
                                }
                            }
                        }
                        .specifox {
                            padding: 4rpx 12rpx;
                            background-color: var(--color);
                            border-radius: 20rpx;
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            .speciNum {
                                min-width: 34rpx;
                                min-height: 34rpx;
                                border-radius: 50%;
                                position: absolute;
                                top: -16rpx;
                                right: 0rpx;
                                z-index: 10;
                                background-color: #ff0000;
                                color: #fff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 20rpx;
                            }
                        }
                    }
                }
            }
        }
        .Evaluation {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            .Evaluationscroll {
                width: 100%;
                // height: 100%;
                box-sizing: border-box;
            }
            .EvaluaBox {
                width: 100%;
                height: 140rpx;
                padding: 0 30rpx 24rpx 30rpx;
                background-color: #fff;
                display: flex;
                position: sticky;
                z-index: 970;
                top: 0px;
                .evnions {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .enbox {
                        width: 100%;
                        display: flex;
                        .enboxlist {
                            padding: 4rpx 20rpx;
                            background-color: $page;
                            color: #333;
                            font-size: 26rpx;
                            border-radius: 20rpx;
                            margin-right: 20rpx;
                            margin-top: 20rpx;
                        }
                        .enboxlist:last-child {
                            margin-right: 0;
                        }
                        .Active {
                            background-color: var(--color);
                            color: #fff;
                        }
                    }
                }
                .ScoreBox {
                    padding-left: 30rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: relative;
                }
                .ScoreBox::after {
                    content: '';
                    width: 1px;
                    height: 120rpx;
                    background-color: #ccc;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .evelin {
                width: 100%;
                padding: 0 30rpx;
                margin-top: 10rpx;
                background-color: #fff;
                .inlinee {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    border-bottom: 1px solid $page;
                    padding: 30rpx 0;
                    .User {
                        width: 100%;
                        display: flex;
                        .userbo {
                            flex: 1;
                            display: flex;
                            .userHead {
                                width: 80rpx;
                                height: 80rpx;
                                border-radius: 50%;
                                margin-right: 20rpx;
                            }
                            .vipTip {
                                padding: 2rpx 10rpx;
                                color: #fff;
                                background-color: var(--color);
                                font-size: 20rpx;
                                border-radius: 10rpx;
                                margin-left: 10rpx;
                            }
                        }
                    }
                    .imgBix {
                        width: 100%;
                        margin-top: 10rpx;
                        .oneImg {
                            max-width: 500rpx;
                            height: 300rpx;
                            margin-top: 10rpx;
                            border-radius: 10rpx;
                        }
                    }
                    .imgBixTwo {
                        width: 100%;
                        margin-top: 10rpx;
                        display: flex;
                        justify-content: space-between;
                        .twoImg {
                            width: 340rpx;
                            height: 300rpx;
                            margin-top: 10rpx;
                            border-radius: 10rpx;
                        }
                    }
                    .imgBixMote {
                        width: 100%;
                        margin-top: 10rpx;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 10rpx;
                        .threImg {
                            height: 200rpx;
                            margin-top: 10rpx;
                            border-radius: 10rpx;
                        }
                    }
                    .Reply {
                        width: 100%;
                        padding: 24rpx;
                        background-color: #f2f2f2;
                        color: #333;
                        margin-top: 20rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
        .Merchant {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            .storeImgs {
                width: 100%;
                height: 230rpx !important;
                background-color: #fff;
                padding: 20rpx 0;
                box-sizing: border-box;
                .Imgsli {
                    width: 250rpx;
                    height: 180rpx;
                    position: relative;
                    display: inline-block;
                    margin-left: 20rpx;
                    overflow: hidden;
                    border-radius: 10rpx;
                    image {
                        width: 250rpx;
                        height: 180rpx;
                    }
                }
                .Imgsli:last-child {
                    margin-right: 20rpx;
                }
            }

            .Merxs {
                width: 100%;
                padding: 24rpx 30rpx;
                background-color: #fff;
                margin-top: 10rpx;
                display: flex;
                align-items: center;
            }
            .u-parse {
                width: 100%;
                background-color: #fff;
                margin-top: 10rpx;
            }
        }
    }
    .speciWrapper {
        width: 100%;
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        .speciImg {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .domeonm {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 30rpx;
            .lists {
                padding: 16rpx 30rpx;
                border: 1px solid #ccc;
                border-radius: 10rpx;
                margin-top: 20rpx;
                font-size: 26rpx;
                color: #999;
                margin-right: 20rpx;
            }
            .Active {
                border: 1px solid var(--color);
                background-color: var(--color);
                color: #fff;
            }
            .noState {
                color: #ccc;
            }
        }
        .shopCat {
            width: 100%;
            height: 110rpx;
            background-color: #333;
            border-radius: 55rpx;
            margin-top: 70rpx;
            padding: 0 20rpx;
            overflow: hidden;
            display: flex;
            align-items: center;
            .catPrice {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            .joinCate {
                height: 90rpx;
                padding: 0 30rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 32rpx;
                border-radius: 45rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .Storecontent {
        width: 100%;
        padding: 0 24rpx 30rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            width: 100%;
            height: 100rpx;
            color: #000;
            font-size: 32rpx;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list {
            width: 100%;
            padding: 20rpx;
            border: 1px solid #f1f1f1;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            .list_log {
                width: 100rpx;
                height: 100rpx;
                border-radius: 6rpx;
                overflow: hidden;
                margin-right: 20rpx;
            }
            .JoinBox {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #999;
                margin-left: 20rpx;
            }
            .active {
                border: 1px solid var(--color);
                background-color: var(--color);
            }
        }
    }
</style>
